<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
  integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
  integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
  crossorigin="anonymous"></script>
  <script src="/22-05/jQuery/购物车/5.25Data.js"></script>
</head>
<body>
    <style>
         *{
          margin: 0;padding: 0;
        }
        .box{
            width: 1000px;
            margin: auto;
        }
        .next{
            width: 1000px;
            margin:100px auto;
           
        }
        .next input{
            margin-left: 40%;
        }
        th{
            text-align: center;
            line-height: 50px;
        }
         .se{
         width: 200px;
         float: left;
     }
     .int input{
        width: 100px;
         float: left;
     }
    </style>
    <div class="box">
        <h1>学生成绩录入</h1>
        <select class="form-control se" id="year">
            <option value="">学校</option>
          </select>
        <select class="form-control se" id="dan">
            <option value="">年级</option>
          </select>
        <select class="form-control se" id="garde">
            <option value="">班级</option>
          </select><br><br>
          <div class="int">
            姓名：<input type="text" class="form-control in" id="userName"><br><br>
            语文<input type="text" class="form-control in" id="chinese"><br><br>
            数学：<input type="text" class="form-control in" id="math"><br><br>
            英语：<input type="text" class="form-control in" id="english"><br><br>
          </div>
          <a class="btn btn-default" href="#" role="button" id="add">添加</a>
    </div>
    <a class="btn btn-default" href="#" role="button" id="cy">北京朝阳小学</a>
    <a class="btn btn-default" href="#" role="button" id="xc">北京西城小学</a>
    <div class="next">
        <a class="btn btn-default" href="#" role="button" id="yw">语文</a>
        <a class="btn btn-default" href="#" role="button" id="sx">数学</a>
        <a class="btn btn-default" href="#" role="button" id="wy">英语</a>
        <a class="btn btn-default" href="#" role="button" id="zf">总分</a>
        <a class="btn btn-default" href="#" role="button" id="pjf">平均分</a>
        <table class="table table-hover" border="1" id="tab2">
            <thead>
                <tr>
                    <th>年级-班级</th>
                    <th>姓名</th>
                    <th>语文</th>
                    <th>数学</th>
                    <th>英语</th>
                    <th>总分</th>
                    <th>平均分</th>
                    <th>名次</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
        
    </div>
</body>
<script>
     let garde =[
    {
        "name": "北京朝阳小学",
        "garde": [{
            "name": "一年级",
            'class':['1班','2班','3班']
        },
        {
            "name": "二年级",
            'class':['1班','2班','3班']
        }]

    },
    {
        "name": "北京西城小学",
        "garde": [{
            "name": "一年级",
            'class':['1班','2班','3班']
        },
        {
            "name": "二年级",
            'class':['1班','2班','3班']
        }]
    }]
    
    let studentList = []
    let bjxc =[]
    $(function(){
        // 下拉框
        select()
        //点击添加
        $('#add').click(add)
        // 显示学生列表
        bjxcList()
        showStudentsList()
        
        //语文排序
        $('#yw').click(yw)
         //数学排序
         $('#sx').click(sx)
          //英语排序
        $('#wy').click(wy)
         //总分排序
         $('#zf').click(zf)
          //平均分排序
        $('#pjf').click(pjf)
        //朝阳
        $('#cy').click(cy)
        // 西城
        $('#xc').click(xc)
    })
        
       //添加学生信息
       function add(){
           if ($('#year option:selected').val() == 0){
            var year = $('#dan option:selected').html() +'-'+ $('#garde option:selected').html()
           var dan = $('#dan').val()
           var garde = $('#garde').val()
           var userName = $('#userName').val()
           var chinese = $('#chinese').val()
           var math = $('#math').val()
           var english = $('#english').val()
           let addAll = {
              year:year,
              dan:dan,
              garde:garde,
              userName:userName,
              chinese:chinese,
              math:math,
              zf:+chinese + +math + +english,
              pjf:(+chinese + +math + +english)/3,
              english:english,
           }

           studentList.push(addAll)
           localStorage.setItem('studentList',JSON.stringify(studentList))
           showStudentsList()
           }else if(($('#year option:selected').val() == 1)){
                 var year = $('#dan option:selected').html() +'-'+ $('#garde option:selected').html()
           var dan = $('#dan').val()
           var garde = $('#garde').val()
           var userName = $('#userName').val()
           var chinese = $('#chinese').val()
           var math = $('#math').val()
           var english = $('#english').val()
           var zf =$('#zf').val()
           var pjf =$('#pjf').val()
           let addAll = {
              year:year,
              dan:dan,
              garde:garde,
              userName:userName,
              chinese:chinese,
              math:math,
              zf:+chinese + +math + +english,
              pjf:(+chinese + +math + +english)/3,
              english:english,
           }

           bjxc.push(addAll)
           localStorage.setItem('bjxc',JSON.stringify(bjxc))
          bjxcList()
           }
           
        }
        // 下拉框
        function select(){
            var s = '<option>请选择年级</option>'
      for (let i in garde) {
      // 拼接  
          s += `<option value='${i}'>${garde[i].name}</option>`
      }
      $('#year').html(s)
      $('#year').change(function(){
          var index = $(this).val()
          var danHtml = '<option>请选择年级</option>'
          for(let i in garde[index].garde){
            danHtml +=`<option value='${index}-${i}'>${
                garde[index].garde[i].name
            }</option>`
          }
          $('#dan').html(danHtml)

      })  
      $('#dan').change(function(){
        var gardeHtml = '<option>请选择班级</option>'
        var index = $(this).val()
        var indexArr = index.split('-')
        var kk = garde[indexArr[0]].garde[indexArr[1]].class
         for (let i in kk) {
            gardeHtml +=`
            <option value='${index}-${i}'>${kk[i]}</option>`
         }
        $('#garde').html(gardeHtml)
      })
        }
       
        function showStudentsList() {       
            studentList = localStorage.getItem('studentList')
           ? JSON.parse(localStorage.getItem('studentList'))
           :[]
            var strHtml = ''
            for (let i in studentList) {
                strHtml += `
                            <tr>
                                <td>${studentList[i].year}</td>
                                <td>${studentList[i].userName}</td>
                                <td>${studentList[i].chinese}</td>
                                <td>${studentList[i].math}</td>
                                <td>${studentList[i].english}</td>
                                <td>${studentList[i].zf}</td>
                                <td>${studentList[i].pjf}</td>
                                <td>${Number(i)+1}</td>
                            </tr>`
            }
            $('tbody').html(strHtml)
        }
        function yw(){
            studentList.sort(function(a,b){
                    return b.chinese-a.chinese
                })
                localStorage.setItem('studentList',JSON.stringify(studentList))
                showStudentsList()
        }
        function sx(){
            studentList.sort(function(a,b){
                    return b.math-a.math
                })
                localStorage.setItem('studentList',JSON.stringify(studentList))
                showStudentsList()
        }
       function wy(){
        studentList.sort(function(a,b){
                    return b.english-a.english
                })
                localStorage.setItem('studentList',JSON.stringify(studentList))
                showStudentsList()
        }
       function zf(){
        studentList.sort(function(a,b){
                    return b.zf-a.zf
                })
                localStorage.setItem('studentList',JSON.stringify(studentList))
                showStudentsList()
        }
       function pjf(){
        studentList.sort(function(a,b){
                    return b.pjz-a.pjz
                })
                localStorage.setItem('studentList',JSON.stringify(studentList))
                showStudentsList()
        }

       function cy(){
        $(this).css('background','pink').siblings().css('background','')
        showStudentsList()
        localStorage.setItem('studentList',JSON.stringify(studentList))
       }
       function xc(){
        $(this).css('background','pink').siblings().css('background','')
        bjxcList()
          localStorage.setItem('bjxc',JSON.stringify(bjxc))
       
       }
       
      
       






        function bjxcList() {       
            bjxc = localStorage.getItem('bjxc')
           ? JSON.parse(localStorage.getItem('bjxc'))
           :[]
            var strHtml = ''
            for (let i in bjxc) {
                strHtml += `
                            <tr>
                                <td>${bjxc[i].year}</td>
                                <td>${bjxc[i].userName}</td>
                                <td>${bjxc[i].chinese}</td>
                                <td>${bjxc[i].math}</td>
                                <td>${bjxc[i].english}</td>
                                <td>${bjxc[i].zf}</td>
                                <td>${bjxc[i].pjf}</td>
                                <td>${Number(i)+1}</td>
                            </tr>`
            }
            $('tbody').html(strHtml)
        }
        function yw(){
            bjxc.sort(function(a,b){
                    return b.chinese-a.chinese
                })
                localStorage.setItem('bjxc',JSON.stringify(bjxc))
                showStudentsList()
        }
        function sx(){
            bjxc.sort(function(a,b){
                    return b.math-a.math
                })
                localStorage.setItem('bjxc',JSON.stringify(bjxc))
                showStudentsList()
        }
       function wy(){
        bjxc.sort(function(a,b){
                    return b.english-a.english
                })
                localStorage.setItem('bjxc',JSON.stringify(bjxc))
                showStudentsList()
        }
       function zf(){
        bjxc.sort(function(a,b){
                    return b.zf-a.zf
                })
                localStorage.setItem('bjxc',JSON.stringify(bjxc))
                showStudentsList()
        }
       function pjf(){
        bjxc.sort(function(a,b){
                    return b.pjz-a.pjz
                })
                localStorage.setItem('bjxc',JSON.stringify(bjxc))
                showStudentsList()
        }
   
</script>
</html>